<template>
    <div>
     
         <el-col :span="6" :offset="0">
	    
            <el-card class="box-card">
                 <div slot="header" class="clearfix">
                        <span>
			<a :href="card.url" target="_blank" rel="nofollow">	
			     	{{card.name}}
                 	     </a>
			</span>
                 <el-button style="float: right; padding: 3px 0" @click="expand" type="text">+</el-button>
                 </div>
		 
		 <el-scrollbar :class="ClassName" wrap-style="overflow-x: hidden;" :native="false">
		 
			<div v-for="o in card.content" :key="o.url" class="text item" >
		 	     <a :href="o.url" target="_blank" rel="nofollow" @click="log(o)">	
			     	{{o.title}}
                 	     </a>
                 	</div>
	
		 
		 </el-scrollbar>

		 <div class="bottom clearfix">
          	      <time class="time">{{ card.updatetime }}</time>
          	 </div>
            </el-card>
	    
         </el-col>
    </div>
</template>
<script>
    export default {
        name: "mycard",

        components: {
        },
        props:{
            card:{}
	},
        data() {
            return {
	      currentDate: new Date(),
	      isexpand:false,
	      ClassName:"UnExpandCard"
            }
        },

        methods: {
	    expand() {
	      console.log("expand");
	      if(this.isexpand){
		this.isexpand=false;
		this.ClassName="UnExpandCard";
	      }else{
	        this.isexpand=true;
		this.ClassName="ExpandCard";
	      }
	    },
	    log(o){
		this.$store.commit('push_history', o);
	    }
        }
    }
</script>
<style scoped>
  .UnExpandCard {
    overflow:hidden;
    height:293px;
    width:100%;
  }
  .ExpandCard {
    overflow:hidden;
    min-height: 293px;
    width:100%;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    clear: both;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }




  .box-card {
    width: 100%;
    height: 100%;
  }
  .el-col {
    margin: 10px;
    border-radius: 4px;
    width: 350px;
  }
</style>